<template>
  <div class="box">
    <div class="box-head">
      <a>{{ content }}</a>
      <span>支出金额： {{ input }} </span>
      <!-- 支出数额 -->
    </div>
    <!-- 支出分类 -->
    <div class="box-cent" @click="revenue($event)">
      <div v-for="(item,index) in data" :key="index">
        <img src="../../../assets/imgs/支出.svg" alt="" />
        <p>{{ item.type_name }}</p>
      </div>
      
    </div>

    <!-- 日期插件，input插件，输入面板-->
    <div class="count" v-if="flag">
      <p class="data_remarks">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder=""
          class="count_data"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-input
          placeholder="输入备注"
          v-model="input2"
          clearable
          class="count_remarks"
        ></el-input>
      </p>
      <div>
        <p class="recokon" @click="recokon($event)">
          <a>7</a>
          <a>8</a>
          <a>9</a>
          <a>4</a>
          <a>5</a>
          <a>6</a>
          <a>1</a>
          <a>2</a>
          <a>3</a>
          <a>0</a>
        </p>
        <p class="recokon" @click="recokonsort($event)">
          <a>C</a>
          <a>B</a>
          <a>Sure</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
// 导入样式
import "../../../assets/css/addcheck.less";

export default {
  data() {
    return {
      input: "", //金额数值
      input2: "", //备注
      content: "一般", //分类
      value1: "", //日期插件,
      value2: "0",
      data: [],
      flag: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    revenue(e) {
      // 获取存钱的类别
      if (e.path[0].textContent == "") {
        this.content = e.target.parentNode.textContent;
        this.flag = true;
      } else if (e.path[0].textContent != "") {
        this.content = "";
        this.flag = false;
        this.input = "";
      }
    },
    // 渲染金额
    recokon(e) {
      this.input += e.target.textContent;
    },
    // 清除按钮
    recokonsort(e) {
      if (e.target.textContent == "C") {
        this.input = "";
      }
      // 回删按钮
      if (e.target.textContent == "B") {
        this.input = this.input.slice(0, this.input.length - 1);
      }
      if (this.input != "" && this.content != "" && this.value1 != "") {
        if (e.target.textContent == "Sure") {
          // 获取金额、备注、分类、时间
          let data = {
            uid: this.$jwt(localStorage.getItem("User-Token")).uid,
            mo_money: this.input, //金额
            con_rex: this.input2, //备注
            expen_type_id: this.content, //分类
            con_time: this.$time(this.value1), //时间
            mo_flage: this.value2, //收入
          };
          this.$http.post("/api/bill/add", data).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: '账单添加成功',
                type: 'success'
              })
              setTimeout(() => {
                this.$router.push({
                  path: "/check/pay",
                });
              }, 1000);
            }
          });
        }
      }
    },
  },
  //   渲染日期
  mounted() {
    this.value1 = Date.now();
    this.$http.get('/api/bill/tpye',{
      flag: 1
    }).then(res => {
      res.tpyedata.forEach(once => {
        this.data.push(once)
        // console.log(once);
      })
    })
    // console.log(this.data);
  },
};
</script>
